<template>
	<view class="wrap">
		<view class="nav" v-if="nav.length">
			<view class="nav_cell" :class="navIndex==index ? 'nav_active':''" v-for="(item,index) in nav" :key="index" @click="navIndex=index">
				{{item.title}}
			</view>
		</view>
		<!-- <messageList></messageList> -->
	</view>
</template>

<script>
// import messageList from './components/messageList.vue';
	export default {
		components:{
			// messageList
		},
		data() {
			return {
				nav:[{title:'全部'},{title:'待处理'},{title:'同意沟通'},{title:'拒绝沟通'}],
				navIndex:0
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.wrap{
	.nav{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		background-color: #fff;
		.nav_cell{
			padding: 24rpx;
			font-size: 28rpx;
			color: #999999;
		}
		.nav_active{
			font-weight: bold;
			color: #333333;
			position: relative;
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 50%;
				height: 8rpx;
				background: #706EEE;
				border-radius: 5rpx;
			}
		}
	}
}
</style>
